<template>
	<div class="group-introduction maxW">
		<div class="crumbs-link">
			<router-link to="/group">学科圈组</router-link>
			<strong>
				<i>></i>
				{{ group_data.name }}
			</strong>
		</div>
		<div class="group-introduct_content">
			<div class="group-introduct clear">
				<div class="group-introduct_img fl"><img :src="BASE_URL + group_data.picture" :onerror="errorImg" /></div>
				<div class="group-introduct_info fr">
					<h2 class="i_info_h">{{ group_data.name }}</h2>
					<div class="i_info_subject" v-if="isSchool">
						<span>
							{{ group_data.grade_name ? group_data.grade_name :'暂无年级' }}
							<i>·</i>
							{{ group_data.subject_name ? group_data.subject_name :'暂无科目' }}
						</span>
					</div>
					<div class="i_info_member">
						<i>成员</i>
						<span>{{ group_data.u_count }}</span>
					</div>
					<div class="i_info_creater">
						<i>创建人</i>
						<span>{{ group_data.create_name }}</span>
					</div>
					<div class="i_info_createtime">
						<i>创建时间</i>
						<span>{{ group_data.create_time }}</span>
					</div>
					<div class="i_info_approval" v-if="isSchool">
						<el-button ref="applyJoinBtn" type="primary" size="small" v-if="added_or_not == 0" :disabled="isDisabled" @click="join_group(1)">申请加入</el-button>
						<el-button type="primary" plain disabled size="small" v-if="added_or_not == 1">已加入</el-button>
						<!-- 用户自主申请 -->
						<el-button type="primary" plain disabled size="small" v-if="added_or_not == 3 && add_type == 1 && add_status == 1">已加入</el-button>
						<el-button-group v-if="added_or_not == 3 && add_type == 1 && add_status == 2">
							<el-button type="primary" size="small" disabled>已被拒绝</el-button>
							<el-button type="primary" size="small" @click="look_reject_reason()">查看原因</el-button>
						</el-button-group>
						<!-- <el-button type="primary" size="small" v-if="added_or_not==3&&add_type==1&&add_status==2">已被拒绝</el-button> -->
						<el-button type="primary" disabled size="small" v-if="added_or_not == 3 && add_type == 1 && add_status == 3">审核中</el-button>
						<!-- 用户被邀请的 -->
						<el-button type="primary" disabled plain size="small" v-if="added_or_not == 3 && add_type != 1 && add_status == 1"
						 @click="join_group()">已加入</el-button>
						<el-button type="primary" disabled size="small" v-if="added_or_not == 3 && add_type != 1 && add_status == 2">已拒绝</el-button>
						<el-button type="primary" size="small" v-if="added_or_not == 3 && add_type != 1 && add_status == 3" @click="join_group(0)">确认加入</el-button>
					</div>
					<router-link :to="{
							path: '/group/postsList',
							query: {
								id: group_id,
								create_id: group_data.create_id
							}
						}">
						<el-button class="i_discuss_btn" type="primary" plain>
							讨论区
							<i class="el-icon-arrow-right"></i>
							<img class="i_info_pic" src="../../../../public/images/group/g_info.png" />
						</el-button>
					</router-link>
				</div>
			</div>
			<div class="teachingPlan_listBox clear">
				<div class="teachingPlan_list_l fl">
					<div class="teachingPlan_top clear">
						<span class="fl">圈组教案</span>
						<div class="teaching_plan_btns fr">
							<el-button :class="[btn_blue_flag == 1 ? 't_plan_btn t_b_blue' : 't_plan_btn']" type="text" @click="get_card_data('time')">
								时间
								<i class="el-icon-sort-down"></i>
							</el-button>
							<el-button :class="[btn_blue_flag == 2 ? 't_plan_btn t_b_blue' : 't_plan_btn']" type="text" @click="get_card_data('download')">
								下载
								<i class="el-icon-sort-down"></i>
							</el-button>
							<el-button :class="[btn_blue_flag == 3 ? 't_plan_btn t_b_blue' : 't_plan_btn']" type="text" @click="get_card_data('favs')">
								收藏
								<i class="el-icon-sort-down"></i>
							</el-button>
						</div>
					</div>
					<el-row :gutter="15">
						<el-col class="plan_card_col" :span="8" v-for="(item, index) of introduct_cards_data" :key="index">
							<el-card shadow="hover">
								<div class="plan-card-top clear">
									<span class="plan_type_img fl"><img :src="BASE_URL + '/static/index/images/format/resourceicon' + item.file_type + '.png'" /></span>
									<div class="plan_card_counts">

										<a v-if="item.origin == 0" class="plan-card-name" :title="item.name" @click="goToDetailPage(item.status_m3u8, item.id)">{{ item.name }}</a>
										<router-link v-else-if="item.origin == 1" :to="{path: '/home/resourceDetail',query: { id: item.id }}" class="plan-card-name">{{ item.name }}</router-link>
										<router-link v-else-if="item.origin == 2 || item.origin == 4" :to="{path: '/home/albumPaper',query: { id: item.id }}" class="plan-card-name">{{ item.name }}</router-link>
										<a v-else class="plan-card-name" :title="item.name">{{ item.name }}</a>

										<div class="card_count">
											<span>{{ item.clicks }}点击</span>
											<span v-show="item.origin == 0||item.origin == 1">{{ item.downloads }}下载</span>
											<span>{{ item.favs }}收藏</span>
										</div>
									</div>
								</div>
								<div class="plan_card_bottom">
									<div class="res-info">
										<p class="plan_file_size">上传时间：{{ getDateDiff(item.create_time) }}</p>
										<p class="plan_file_size">文件大小：{{ change_company(parseInt(item.filesize)) }}</p>
									</div>
									<div class="plan_file_handle">
										<i v-if="item.is_fav == 1" class="ipng Collection07" @click="cancelCollect(item.id, item.origin)"></i>
										<i v-else class="ipng Collection_07" @click="addCollect(item.id, item.origin)"></i>
										<i class="ipng but_doland02_slide" @click="download_group(item.id, item.origin)"></i>
									</div>
								</div>
							</el-card>
						</el-col>
						<div class="introduct_dependent dependent" v-if="introduct_cards_data.length == 0">
							<i class="ipng quanzu_icon03"></i>
							<p>暂无教案数据</p>
						</div>
					</el-row>
					<el-pagination background v-if="total_number > page_size" class="pageing" @current-change="currentChange(page_index, _order_type)"
					 :current-page.sync="page_index" :page-size.sync="page_size" layout="total,prev, pager, next,jumper" :total="total_number"></el-pagination>
				</div>
				<div class="teachingPlan_list_r fr">
					<template>
						<el-tabs v-model="activeName">
							<el-tab-pane label="公告" name="first">
								<ul class="i_notice_ul">
									<li class="i_notice_li" v-for="(item, index) of noticeData" :key="index" @click="showNotice(item.name, item.content)">
										<span>{{ item.name }}</span>
										<span>{{ item.create_time }}</span>
									</li>
									<div class="intro_notice_dependent dependent" v-if="noticeData.length == 0">
										<i class="ipng couse01"></i>
										<p>该圈组暂无公告</p>
									</div>
								</ul>
							</el-tab-pane>
							<el-tab-pane label="成员" name="second">
								<div class="i_members_add">
									<div class="i_members_item" v-for="(item, index) of membersData" :key="index">
										<img :src="BASE_URL + item.avatar_path" :onerror="memberErrorImg" />
										<div class="i_userIn">
											<div class="i_userIn_txt clear">
												<a><img :src="BASE_URL + item.avatar_path" :onerror="memberErrorImg" /></a>
												<div>
													<span>{{ item.user_name }}</span>
													<span>{{ item.message[0].position_name }}</span>
													<span>{{ item.message[0].school_name }}</span>
												</div>
											</div>
											<div class="i_userIn_icon">
												<router-link :to="{
														path: '/space',
														query: {
															id: item.message[0].id
														}
													}"
												 class="plan-card-name">
													<i class="ipng but_maino1_up"></i>
												</router-link>
												<i v-if="item.message[0].is_relation == 1" class="ipng Collection07" @click="focus_or_not(item.message[0].id, item.message[0].is_relation)"></i>
												<i v-else class="ipng Collection_07" @click="focus_or_not(item.message[0].id, item.message[0].is_relation)"></i>
											</div>
										</div>
									</div>
									<div class="intro_member_dependent dependent" v-if="membersData.length == 0">
										<i class="ipng couse02"></i>
										<p>该圈组暂无用户加入</p>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</template>
				</div>
			</div>
		</div>
		<el-dialog :title="reject_reason_flag ? '拒绝理由' : '申请理由'" :visible.sync="applyReasonVisible" width="400px">
			<el-row label="理由" class="group-selfCreated-textarea">
				<el-input :readonly="reject_reason_flag" type="textarea" :rows="5" resize="none" v-model.trim="applyReason"
				 maxlength="140" :placeholder="reject_reason_flag ? '' : '请输入申请理由,不超140字'"></el-input>
				<span class="numberWord" v-if="!reject_reason_flag">
					<i>{{ applyReason.length }}</i>
					/140
				</span>
			</el-row>
			<span v-if="reject_reason_flag == false" slot="footer" class="dialog-footer">
				<el-button type="primary" plain size="small" @click="applyReasonVisible = false">取 消</el-button>
				<el-button type="primary" size="small" :disabled="isDisabled" @click="apply_add_group">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog class="i_notice_dialog" title="公告" :visible.sync="noticeDialogVisible" width="800px">
			<h3>{{ notice_name }}</h3>
			<el-row class="i_notice_content">{{ notice_content }}</el-row>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user_login_id: this.$store.getters.userInfo.id,
				group_id: this.$route.query.id,
				errorImg: 'this.src="' + require('../../../../public/images/group/fengmian1.png') + '"',
				memberErrorImg: 'this.src="' + require('../../../../public/images/user_preview-1.png') + '"',
				group_data: {},
				added_or_not: null,
				applyReasonVisible: false,
				applyReason: '',
				reject_reason_flag: false,
				user_info_length: 0,
				add_type: null,
				add_status: null,
				page_index: 1,
				page_size: 6,
				total_number: 0,
				introduct_cards_data: [],
				btn_blue_flag: 1,
				_order_type: 'time',
				activeName: 'first',
				noticeData: [],
				noticeDialogVisible: false,
				notice_name: '',
				notice_content: '',
				membersData: [],
				isDisabled: false //（点申请加入）弹窗里的确定按钮禁止重复点击
			};
		},
		created() {
			this.get_group();
			this.get_card_data('time');
			this.get_notice_data();
			this.get_members_data();
		},
		computed: {
			isMulti() {
				return this.$store.getters.isMulti;
			},
			isSchool(){
				return this.$store.getters.isSchool;
			},
		},
		methods: {

			get_group() {
				let success = res => {
					if (is_empty(res.data)) {
						this.$message.info("此圈组已不存在");
						setTimeout(() => {
							this.$router.push("/group");
						}, 1000)
					} else {
						this.group_data = res.data;
						if (this.user_login_id == res.data.create_id) {
							this.added_or_not = 1;
						} else {
							this.check_user_info();
						}
					}
				};
				this.$ajax({
					url: '/api/group/group_list',
					method: 'get',
					params: {
						id: this.group_id,
						flag: 'array'
					},
					func: {
						success: success
					}
				});
			},
			//判断用户身份
			check_user_info() {
				if (this.user_login_id == 0 || this.user_login_id == '') {
					this.added_or_not = 0;
					return false;
				}
				let success = res => {
					let objectInfo = res.data[0];
					this.user_info_length = res.data.length;
					if (res.data.length == 0) {
						this.added_or_not = 0;
					} else {
						this.added_or_not = 3;
						this.add_type = objectInfo.add_type;
						this.applyReason = objectInfo.comment;
						this.add_status = objectInfo.status;
					}
					this.isDisabled = false; //（申请加入功能）防止重复点击：点击弹窗的确定按钮的时候禁止，提交成功后，重新获取数据刷新，才把禁止状态解除
				};
				this.$ajax({
					url: '/api/group/group_user',
					method: 'get',
					params: {
						group_id: this.group_id,
						user_id: this.user_login_id
					},
					func: {
						success: success
					}
				});
			},
			join_group(val) {
				if (this.user_login_id == 0 || this.user_login_id == '') {
					this.$message.error('该功能要登录后才可以操作哦');
					return false;
				}
				if (val == 1) {
					this.applyReason = '';
					this.applyReasonVisible = true;
				} else {
					this.agree_add_group();
				}
			},
			apply_add_group() {
				if (this.applyReason == '') {
					this.$message.error('请填写申请理由');
					return false;
				}
				this.isDisabled = true;
				let success = res => {
					this.$message.success(res.msg);
					this.check_user_info();
					this.applyReasonVisible = false;
				};
				//（申请加入功能）防止重复点击，如果申请失败时，也要把点击状态给回复了
				let fail = res => {
					this.applyReasonVisible = false;
					this.isDisabled = false;
					this.$message.error(res.msg);
				};
				this.$ajax({
					url: '/api/group/group_user',
					method: 'post',
					data: {
						group_id: this.group_id,
						user_id: this.user_login_id,
						status: 3,
						add_type: 1,
						comment: this.applyReason
					},
					func: {
						success: success,
						fail: fail
					}
				});
			},
			agree_add_group() {
				let success = res => {
					this.check_user_info();
					this.$message.success('已加入');
				};
				this.$ajax({
					url: '/api/group/group_user',
					method: 'put',
					data: {
						group_id_w: this.group_id,
						user_id_w: this.user_login_id,
						add_type_w: 2,
						status: 1
					},
					func: {
						success: success
					}
				});
			},
			look_reject_reason() {
				this.reject_reason_flag = true;
				this.applyReasonVisible = true;
			},
			get_card_data(order_type) {
				order_type == 'time' ? (this.btn_blue_flag = 1) : order_type == 'download' ? (this.btn_blue_flag = 2) : (this.btn_blue_flag =
					3);
				this._order_type = order_type;
				let success = res => {
					this.introduct_cards_data = res.data.data;
					this.page_index = parseInt(res.data.page_index);
					this.total_number = parseInt(res.data.data_sum);
				};
				this.$ajax({
					url: '/api/group/group_something',
					method: 'get',
					params: {
						group_id: this.group_id,
						user_id: this.user_login_id,
						type: 2,
						page: this.page_index,
						size: this.page_size,
						order_type: order_type,
						data_type: 2
					},
					func: {
						success: success
					}
				});
			},
			change_company(b) {
				return change_company(b);
			},
			// 收藏
			addCollect(id, origin) {
				if (origin == 2) {
					origin = 4;
				}
				let success = res => {
					this.$message.success('收藏成功');
					this._order_type == 'time' ? this.get_card_data('time') : this._order_type == 'download' ? this.get_card_data(
						'download') : this.get_card_data('favs');
				};
				this.$ajax({
					url: '/api/favourite/favourite',
					method: 'post',
					data: {
						user_id: this.user_login_id,
						res_id: id,
						origin: origin
					},
					func: {
						success: success
					}
				});
			},
			//取消收藏
			cancelCollect(id, origin) {
				if (origin == 2) {
					origin = 4;
				}
				let success = res => {
					this.$message.success('取消成功');
					this._order_type == 'time' ? this.get_card_data('time') : this._order_type == 'download' ? this.get_card_data(
						'download') : this.get_card_data('favs');
				};
				this.$ajax({
					url: '/api/favourite/favourite',
					method: 'delete',
					params: {
						user_id: this.user_login_id,
						res_id: id,
						origin: origin
					},
					func: {
						success: success
					}
				});
			},
			// 下载：
			download_group(id, origin) {
				switch (origin) {
					case 0:
						//添加下载记录：
						this.addDownloadRecord(id, origin);
						window.location.href = this.BASE_URL + '/index/resource/resourcedownload?id=' + id + '&type=' + origin +
							'&userid' + this.user_login_id;
						break;
					case 1:
						//添加下载记录：
						this.addDownloadRecord(id, origin);
						window.location.href = this.BASE_URL + '/index/resource/resourcedownload?id=' + id + '&type=' + origin +
							'&userid' + this.user_login_id;
						break;
					case 2:
						window.location.href = this.BASE_URL + '/index/test/download_test?id=' + id;
						break;
					case 4:
						window.location.href = this.BASE_URL + '/index/test/download_test?id=' + id;
						break;
					default:
						break;
				}
			},
			// 添加下载记录
			addDownloadRecord(resId, origin) {
				let success = res => {
					this.get_card_data('time');
				};
				this.$ajax({
					url: 'index/resource/add_download_nums',
					method: 'post',
					data: {
						id: resId,
						userid: this.user_login_id,
						type: origin
					},
					func: {
						success: success
					}
				});
			},
			currentChange(val, order_type) {
				this.page_index = val;
				this.get_card_data(order_type);
			},
			get_notice_data() {
				let success = res => {
					this.noticeData = res.data;
				};
				this.$ajax({
					url: '/api/group/group_something',
					method: 'get',
					params: {
						group_id: this.group_id,
						type: 4,
						order_type: 'time'
					},
					func: {
						success: success
					}
				});
			},
			showNotice(name, content) {
				this.noticeDialogVisible = true;
				this.notice_name = name;
				this.notice_content = content;
			},
			get_members_data() {
				let success = res => {
					//根据账号id ，绑定了不同班级的话，也只显示一次
					if (!is_empty(res.data.data)) {
						let Arr = res.data.data;
						let repeat = [];
						let newArr = [];
						for (let i = 0; i < Arr.length; i++) {
							if (repeat.indexOf(Arr[i].user_id) == -1) {
								newArr.push(Arr[i]);
								repeat.push(Arr[i].user_id);
							}
						}
						this.membersData = newArr;
					}
				};
				this.$ajax({
					url: '/api/group/group_user',
					method: 'get',
					params: {
						group_id: this.group_id,
						status: 1,
						page: 1,
						size: 20,
						data_type: 2
					},
					func: {
						success: success
					}
				});
			},
			focus_or_not(_id, _is_relation) {
				if (this.user_login_id == 0 || this.user_login_id == '') {
					this.$message.error('该功能仅登录后才能使用');
					return false;
				} else if (this.user_login_id == _id) {
					this.$message.error('不能关注自己');
					return false;
				}
				let success = res => {
					this.get_members_data();
					_is_relation == 0 ? this.$message.success('已关注') : this.$message.success('已取消');
				};
				this.$ajax({
					url: '/api/user/bind_relation',
					method: 'get',
					params: {
						user_id: this.user_login_id,
						follow_id: _id,
						type: 0
					},
					func: {
						success: success
					}
				});
			}
		}
	};
</script>
